<template>
  <!-- 辖区管理 -->
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="l-w_content" style="position: relative">
          <div class="add-btn cursor" @click="handelAdd" v-if="showBtns">新增</div>
          <top-title :updateTime="true" :content="content"></top-title>
          <div class="search-group">
            <div class="input-wrap">
              <div class="label">城管姓名:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.realname" placeholder="请填写城管姓名" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">身份证号:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.idCard" placeholder="请填写身份证号" />
              </div>
            </div>
            <div class="input-wrap">
              <div class="label">手机号码:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.mobile" placeholder="请填写手机号码" />
              </div>
            </div>

            <div class="input-wrap">
              <div class="label">城管编号:</div>
              <div class="input-item">
                <j-input :maxLength="30" v-model="queryParam.personNo" placeholder="请填写城管编号" />
              </div>
            </div>

            <div class="btn-wrap">
              <a-button class="searchBtn" @click="searchQuery()" type="primary">搜索</a-button>
              <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
            </div>
          </div>

          <div class="table-wrap">
            <a-table
              rowKey="id"
              class="tableList"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              @change="handleTableChange"
            >
              <template v-slot:action="records">
                <span class="operation deatil-color" @click="showEdit(records)">编辑</span>
                <span class="operation warnColor" @click="showDelete(records)">删除</span>
              </template>
            </a-table>
          </div>
        </div>
      </a-col>
    </a-row>

    <allMessage
      :publicVisible="publicVisible"
      ref="allMessage"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
    <add-editModal ref="addEditModal" @refresh="refresh"></add-editModal>
  </div>
</template>

<script>
import allMessage from '@/components/allMessage'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import { personDel } from '@/api/person'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import JInput from '@/components/jeecg/JInput'
import addEditModal from './modules/addEditModal'

export default {
  name: 'area-index',
  components: { allMessage, leftTree, topTitle, addEditModal, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/police/person/page',
        tree: true,
      },
      content: [['城管人员']],
      publicVisible: false,
      showBtns: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属单位',
          dataIndex: 'unitId_dictText',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'realname',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '身份证号',
          dataIndex: 'idCard',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '手机号码',
          ellipsis: true,
          dataIndex: 'mobile',
          align: 'center',
        },
        {
          title: '编号',
          ellipsis: true,
          dataIndex: 'personNo',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      if (v && v.type == 3) {
        this.showBtns = true
      } else {
        this.showBtns = false
      }
      this.searchQuery()
    },
  },
  methods: {
    handelAdd() {
      let records = {
        unitId: this.queryParam.unitId,
      }
      this.$refs.addEditModal.show(records)
    },

    showEdit(records) {
      this.$refs.addEditModal.show(records)
    },

    refresh() {
      this.searchQuery()
    },

    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },

    tipMessage(records) {
      personDel({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
}
</style>
